<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="js/utils.js"></script>
</head>
<body>
<form method="post" action="/upload/file" enctype="multipart/form-data" id="demoForm">
<div>
    <input type="file" id="imageFile" name="imageFile">
</div>
    <button type="submit">上传</button>
</form>
</body>
<script>
    $("#demoForm").submit(function(){
        //获取用户选择的所有文件（可能有多个，所以本质上是一个数组）
        let files = document.getElementById("imageFile").files;
        //判断是不是真的选中文件
        if(files.length > 0){
            let file = files[0];
            //上传文件
            uploadImage(file)
        }else {
            alert("请选择图片后再提交")
        }
        return false; //阻止表单提交
    });

    function uploadImage(file){
        //使用ajax上传文件的固定写法是实例化一个form对象，并向其赋文件参数
        let form = new FormData();
        form.append("imageFile",file);
        $.ajax({
            url: "/upload/image",
            method: 'post',
            data: form,
            //使用ajax执行文件上传必须设置contentType processData为false，否则会按照字符串数据处理上传；
            contentType: false,
            processData: false,
            success:function(r){
                console.log(r);
                if(r.code == OK){
                    alert('上传完成')
                }else {
                    alert('上传失败')
                }
            }
        })
    }

</script>
</html>